<script setup lang="ts">
import { getSendRecordInfoApi } from '@/apis/modules/message'
import { formatDate, formatEmptyValue } from '@/utils/format'
import SendStatus from './SendStatus.vue'

const route = useRoute()

const loading = ref(false)
const detailInfo = ref<ApiData<typeof getSendRecordInfoApi>>({})

async function getData() {
  loading.value = true
  try {
    detailInfo.value = await getSendRecordInfoApi({
      id: route.params.id as string,
    })
  } finally {
    loading.value = false
  }
}

onMounted(getData)
</script>

<template>
  <a-spin
    :loading="loading"
    class="detail-page"
  >
    <div class="header">
      <div
        class="border-b border-solid pb-6 text-base font-700 border-color-1 text-color-1"
      >
        邮件详情
      </div>
      <div class="grid grid-cols-4 mt-6">
        <div class="info-item">
          <div class="label">
            发件人
          </div>
          <div class="value">
            {{ formatEmptyValue(detailInfo?.send_name) }}
          </div>
        </div>
        <div class="info-item">
          <div class="label">
            发送时间
          </div>
          <div class="value">
            {{ formatDate(detailInfo?.created_at) }}
          </div>
        </div>
        <div class="info-item">
          <div class="label">
            发送状态
          </div>
          <div class="value">
            <send-status :status="detailInfo?.send_status_type" />
          </div>
        </div>

        <div class="info-item">
          <div class="label">
            收件人
          </div>
          <div class="value">
            {{ formatEmptyValue(detailInfo?.email) }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="content-container"
      v-html="detailInfo?.content"
    />
  </a-spin>
</template>

<style scoped lang="less">
.detail-page {
  @apply flex flex-col w-full h-full p-8 bg-white;
  .header {
    @apply shrink-0 p-6;
    .info-item {
      @apply flex items-start flex-col gap-y-2 text-12px gap-x-2;
      .label {
        @apply w-16 text-xs text-color-3;
      }
      .value {
        @apply text-color-1 text-xs;
      }
    }
  }
  .content-container {
    @apply flex-1 w-full bg-fill-1 overflow-y-auto p-4;
  }
}
</style>
